<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=utf-8;"/>
		<title></title>
	</head>
	<style type="text/css">
		html,body{
			width: 1920px;
			background-image: url(__WK__/image/bg.png);
			background-repeat: no-repeat;
			background-size:100% 100%;
			height: auto;
			min-height: 100%;
			/*height: 100%;*/
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
			position:relative;
		}
		body{
			width: 1920px;
			height: 1080px;
			background:url(image/bg.png) no-repeat ;
			background-size:cover; 
			min-width: 1920px;
		}
		.top{
			width: 100%;
			height: 80px;
			padding-top: 5px;
		}
		.logo{
			width: 270px;
			height: 80px;
			
			float: left;
		}
		.logo_img{
			padding-left: 30px;
			width: 80px;
			height: 100%;
			float: left;
		}
		.logo_right{
			width: 1380px;
			height: 100%;
			float: left;
		}
		.nav{
			width: 868px;
			height: 100%;
			padding: 15px 0;
			margin: auto;
			font-size: 30px;
			color: white;
			font-weight: bold;
		}
		.nav_inner{
			width:184px;
			height: 50px;
			margin-right: 44px;
			line-height: 50px;
			float: left;
			font-size: 24px;
			text-align: center;
		}
		.nav_inner:nth-child(1){
			background: url(image/yuanjiao.png) no-repeat center center;
			    /* background-image: url(../image/btn.png); */
		    background: -moz-linear-gradient(bottom left, #ff800b,#ffbe28);
		    background: -webkit-linear-gradient(bottom left, #ff800b,#ffbe28);
		    background: -o-linear-gradient(bottom left, #ff800b,#ffbe28);
		    background-size: 100% 100%;
		    -moz-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    -webkit-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    border-radius: 26px;
		}
		.nav_inner:nth-child(4){
			margin-right: 0;
		}
		.nav_right{
			width: 270px;
			height: 100%;
			float: right;
			/*background-color: red;*/	
			font-size: 24px;
			color: white;
			font-weight: bold;
		}
		.login{
			float: left;
			width: 42px;
			font-size: 20px;
			color: white;
			font-weight: bold;
			margin-top: 28px ;
		}
		.regsin{
			float: left;
			width: 142px;
			height: 50px;
			color: #ebdec8;
			margin: 15px 44px 40px 40px;
			background-color: white;
			text-align: center;
			line-height: 50px;
			border-radius:25px;
		}
		/*login头*/
		.content{
			width: 1232px;
			height: 696px;
			margin: auto;
			margin-top: 120px;
			background:url(image/bg.png) no-repeat ;
			background-position:100% 100%; 
			 -moz-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    -webkit-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    box-shadow: 5px 3px 10px 6px rgba(0,0,0,0.2);   
		}
		.content_inner{
			width: 295px;
			height: 544px;
			padding-top: 82px;
			margin-left: 230px;
			/*background-color: red;*/	
		}
		.content_logo{
			width: 100%;
			height: 100px;
		}
		.words{
			width: 100%;
			height: 135px;
			line-height: 135px;
			text-align: left;
			font-size: 30px;
			color: #999999;
			font-weight: bold;
		}
		.phone{
			width: 100%;
			height: 52px;
			border-radius: 26px;
			border: 1px solid #999999;
			margin-bottom: 20px;
		}
		.phone img{
			width: 16px;
			height: 16px;
			margin-top: 16px;
			margin-left: 20px;
			margin-right: 20px;
		}
		.phone input{
			width: 200px;
			height: 91%;
			outline:none;
			border: none;
		}
		 input{ /* WebKit browsers */ 
		    font: 16px Arial;
		    color: #999999;
		} 
		.passwords{
			width: 100%;
			height: 52px;
			border-radius: 26px;
			border: 1px solid #999999;
			margin-bottom: 20px;
		}
		.passwords img{
			width: 16px;
			height: 16px;
			margin-top: 16px;
			margin-left: 20px;
			margin-right: 20px;
		}
		.passwords input{
			width: 200px;
			height: 91%;
			outline:none;
			border: none;
		}
		.passwords span{
			cursor: pointer;
		}
		.btn_login{
			width: 100%;
			height: 52px;
			border-radius: 26px;
			margin-bottom: 90px;
			/*background: url(image/Btn_评价提交.png) no-repeat ;*/
			/*background-color: #FF800B;*/
			background-size:100% 100%;
			text-align: center;
			font-size: 16px;
			color: white;
			font-weight: bold;
			line-height: 52px;
			margin-bottom: 20px;
			
			background: -moz-linear-gradient(left, #ffe329 0%, #ffba00 100%);
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe329), color-stop(100%,#ffba00));
		    background: -webkit-linear-gradient(left, #ffe329 0%,#ffba00 100%);
		    background: -o-linear-gradient(left, #ffe329 0%,#ffba00 100%);
		    background: -ms-linear-gradient(left, #ffe329 0%,#ffba00 100%);
		    background: linear-gradient(to right, #ffe329 0%,#ffba00 100%);
		}
		.tishi{
			width: 153%;
			height: auto;
			font-size: 16px;
			color: #999999;
		}
		#get{
			display:inline-block;
			margin-left:20px;
		}
		.cl{
			display:inline-block;
			color: #ffba00;
			cursor:pointer;
		}
		.cd{
			display:inline-block;
			color: #ffba00;
			margin-left:50px;
			display:none;
		}
		.wo{
			color: #ffba00;
			display:none;
		}
		.agree{
			color: #ffba00;
			text-decoration:none;
		}
		.agree:hover{
			text-decoration:underline;
		}
		input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px white inset;}
	</style>
	<body>
		<div class="top">
				<div class="logo">
					<img class="logo_img" src="image/logo.png" alt="" />
				</div>
				<div id="" class="logo_right">
					<div class="nav">
						<div class="nav_inner"style="">首页</div>
						<div class="nav_inner">口语预约</div>
						<div class="nav_inner">写作预约</div>
						<div class="nav_inner">个人中心</div>
					</div>
				</div>
				<div class="nav_right">
					<a  class="login" href="{:url('Login/showLogin')}" style="text-decoration:none;">
						登陆
					</a>
					<div id="" class="regsin">
						注册
					</div>
				</div>
		</div>
		<div class="content">
			<div class="content_inner">
				<div class="content_logo">
					<img class="logo_img"style="height: 76px;padding-left: 0;" src="image/logo.png" alt="" />
				</div>
				<div class="words">
					账号注册
				</div>
				<form id="updateForm">
					<input type="password" style="position:absolute;top:-999px;">
					<div class="phone" id="mobile">
						<img src="image/icon_上一月.png" alt="" />
						<input type="text" name="phone" id="phone"  onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11" placeholder="请输入手机号"/>
					</div>
					<div class="passwords" id="passw">
						<img src="image/icon_上一月.png" alt="" />
						<input type="password" name="pwd" id="pwd" value="" placeholder="请输入密码"/>
					</div>
					<div class="phone" id="ver" >
						<img src="image/icon_上一月.png" alt="" />
						<input type="text" name="verify" id="verify" value="" placeholder="输入验证码" style="width: 100px;font-size: 16px;"/>
						<!--<span style="color: #ffba00;margin-left: 20px;">获取验证码</span>-->
						<span id="get">
							<span class="cd">60</span>
							<span class="wo">S</span>
							<span class="cl" >获取验证码</span>
						</span>
					</div>
					<div class="btn_login"  id="but"  style="cursor:pointer;">
						立即注册
						<img src="img" alt="" />
					</div>
					<div class="tishi">
						注册视为同意<a class="agree" href="">《轻快教育用户协议》</a>
						<!--&nbsp;&nbsp;&nbsp;&nbsp;没有账号，<span style="color: #ffba00;">立即注册！</span>-->
					</div>
				</form>
			</div>
		</div>
		<script src="__STATIC__/plugins/jquery/jquery.min.js"></script>
		<script src="__STATIC__/js/layer/layer.js"></script>
		<script>
			$(function(){
                $("#phone").focus();
			})
            $(".cl").click(function(){
                // alert(111);
                var phone = $("input[name=phone]").val();
                var pattern = /^1[34578]\d{9}$/;
                var num = $(".cd").html();
                if(pattern.test(phone) && $(".cl").attr("display","true")){
                    var data = "phone="+phone;
                    $.ajax({
                        type:'get',
                        url:"{:url('resign/checkPhone')}",
                        data:data,
                        dataType:"json",
                        success:function(res){
							if(res.status == 0){
                                $('#mobile').css('border-color','#FF5722');
                                $("#phone").focus();
                                layer.msg(res.msg,{icon:5,time:2000});
							}else{
                                $.ajax({
                                    type:'get',
                                    url:"{:url('resign/createVerify')}",
                                    data:data,
                                    dataType:"json",
                                    success:function(res){
                                        if(res.status == 0){
                                            layer.msg(res.msg,{icon:5,time:2000});
                                        }
                                    }
                                });
                                $(".cl").hide();
                                $(".cd").show();
                                $(".wo").show();
                                var timer = setInterval(function(){
                                    if(num<=1){
                                        clearInterval(timer);
                                        $(".cl").show();
                                        $(".cd").hide();
                                        $(".wo").hide();
                                        $(".cd").html(60);
                                    }else{
                                        num = num-1;
                                        $(".cd").html(num);
                                        $("#get").attr("disabled","false");
                                    }
                                },1000);
							}
                        }
                    });

                }else{
                    $('#mobile').css('border-color','#FF5722')
                    layer.msg('请输入有效的手机号...',{icon:5,time:2000});
                }
            });

            $("#phone").change(function(){
                $('#mobile').css('border-color','#999999')
			})
            $("#pwd").change(function(){
                $('#passw').css('border-color','#999999')
            })
            $("#verify").change(function(){
                $('#ver').css('border-color','#999999')
            })

			$("#but").click(function(){
                var phone = $("input[name=phone]").val();
                var pattern = /^1[34578]\d{9}$/;
                // console.log();
                if($("#phone").val()=="" || pattern.test(phone) == false){
                    $('#mobile').css('border-color','#FF5722');
                    $("#phone").focus();
                    return;
                }else if($("#pwd").val()==""){
                    $('#passw').css('border-color','#FF5722');
                    $("#pwd").focus();
                    return;
                }else if($("#verify").val()==""){
                    $('#ver').css('border-color','#FF5722');
                    $("#verify").focus();
                    return;
                }else{
                    var formData = $("#updateForm").serialize();
                    $.ajax({
                        type:'post',
                        url:"{:url('resign/signIn')}",
                        data:formData,
                        dataType:"json",
                        success:function(res){
                            if(res.status == 0){
                                layer.msg(res.msg,{icon:5,time:2000});
                            }else{
                                // layer.msg(res.msg,{icon:6,time:2000});
								window.location.href = "{:url('Login/showLogin')}";
                            }
                        }
                    });
                }
			})
		</script>
	</body>
</html>
